<style>

    /* nav */
    nav.navbar-inverse {
        background-color: var(--background-black-color);
        border-color: #000;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
    }

    nav.navbar-inverse .navbar-brand {
        height: 60px;
        padding: 5px 0 5px 20px;
    }

    nav.navbar-inverse .navbar-brand .logo {
        width: 30px;
        margin-right: 12px;
    }

    nav.navbar-inverse .navbar-brand .title {
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
    }

    nav.navbar-inverse .navbar-nav > li > a {
        height: 60px;
        line-height: 27px;
        color: #ffffff;
        padding: 15px 20px;
    }

    nav.navbar-inverse .navbar-nav > li > a:before {
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
        font-weight: 600;
    }

    nav.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
        color: var(--primary-dark-color);
        background-color: var(--background-black-color);
        font-weight: 500;
    }

    nav.navbar-inverse .navbar-nav > .active > a {
        background-color: inherit;
        color: var(--primary-dark-color);
        font-weight: 500;
    }

    nav.navbar-inverse .navbar-nav > .active > a:hover {
        background-color: var(--background-black-color);
        color: var(--primary-dark-color);
        font-weight: 500;
    }

    .navbar-inverse .navbar-collapse::-webkit-scrollbar{
        width: 0;
        height: 0;
    }

    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
        border-color:var(--background-black-color);
    }
</style>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="nav-container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">
                    <img src="{$moduleAttachUrl}/static/images/logo.png" alt="" class="logo">
                    <span class="title">星数引擎（xsframe）</span>
                </span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand flex-center" href="{:url('@/')}">
                <img src="{$moduleAttachUrl}/static/images/logo.png" alt="" class="logo">
                <span class="title">星数引擎（xsframe）</span>
            </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li {if $controller == 'pc.home'}class="active"{/if} ><a href="{:url('@/')}">首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" style="margin-right: 0;">
                <li class=""><a href="">登录</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

<script>
    require(['jquery'], ($) => {
        require(['bootstrap']);
    });
</script>